<template>
  <div style="padding-left:20px" >
        <div>{{selective.name}}</div>
        <div>
            <q-item-section @click="selectiveShipType()" >
              <q-item-label v-if="selective.shipType">船舶类型:&nbsp;&nbsp;<span style="color:rgba(244, 193, 12, 0.752)">{{shipType}}</span></q-item-label>
            </q-item-section>
        </div>
        <q-dialog :maximized="maximized" flat persistent ref="dialog" >
          <q-form  class="dialog_half column">
            <h5 class="view_title justify-between q-px-md">
              类型选择
              <q-btn dense outline round icon="clear" size="sm" v-close-popup />
            </h5>
            <q-scroll-area class="col">
              <div class="row q-col-gutter-x-md dialog_form q-pa-md">
                <div  style="margin:auto" v-for="typeData in shipTypeData" :key="typeData.id">
                  <q-btn  style='width: 150px;height: 100px;margin: 10px;' color="blue" @click="selectiveType(typeData)">
                    {{ typeData.shipTypeName }}
                  </q-btn>
                </div>
              </div>
            </q-scroll-area>
          </q-form>
        </q-dialog>
  </div>

</template>

<script>
export default {
  props: {
    selective: Object
  },
  components: {},
  data() {
    return {
      maximized: false,
      shipTypeData: [],
      shipType: '选择类型',
    };
  },
  watch: {},
  computed: {
  },
  methods: {
    selectiveShipType() {
      this.$axios.get('/sys/shipType/shipTypeList').then((r) => {
        this.shipTypeData = r.result;
      });
      this.$refs.dialog.show();
    },
    selectiveType(selectiveType) {
      this.shipType = selectiveType.shipTypeName;
      this.$refs.dialog.hide();
      this.$emit('childMethod', selectiveType.shipTypeCode);
      this.$axios.get('/sys/user/updateShipType',{ params: { shipType: selectiveType.shipTypeCode,shipTypeName: selectiveType.shipTypeName } }).then((r) => {
        localStorage.shipTypeName = selectiveType.shipTypeName;
        localStorage.shipTypeCode = selectiveType.shipTypeCode;
        this.$emit('shipTypeGo');
      });
    },
    init() {
      if (this.shipType === '选择类型') {
        this.selectiveShipType();
      }
      if (this.$store.state.User.info.shipType === null || this.$store.state.User.info.shipType === '') {
        this.selectiveShipType();
      }
    }
  },
  created() {
  },
  mounted() {
    if (localStorage.shipTypeName) {
      this.shipType = localStorage.shipTypeName;
    }
  },

};
</script>
<style lang="stylus">
.dialog_half
  @extend .dialog_parent
  min-width 40vw
  height 40vh

</styls>
